<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scss样式学习</title>
</head>
<body>
  <!-- <div style="border: 2px solid red;">
    <div style="float: left; width: 100px; height: 100px; background: lightblue;">
      浮动元素
    </div>
  </div> -->

  <div class="clearfix" style="border: 2px solid red;">
    <div style="float: left; width: 100px; height: 100px; background: lightblue;">
      浮动元素
    </div>
    <!-- 父容器现在会正确包裹浮动元素 -->
  </div>
    <!-- a {
        color: blue; // 为所有 <a> 元素设置蓝色文本
        &.b {
          color: red; // 为所有同时拥有类名 b 的 <a> 元素设置红色文本
        }
      }
      在这个完整的例子中：

所有的 <a> 元素都会被设置为蓝色文本。
但是，如果某个 <a> 元素同时还有一个类名 b（即 <a class="b">...</a>），那么它的文本颜色会被覆盖为红色。 -->
</body>
<style>

/* .clearfix::after {
  content: "";
  display: table;
  clear: both;
} */
.clearfix{
  display: flow-root; /* 最佳实践之一 */
}
</style>
</html>